<template>
    <div class="classTest" @click="closeModel">
        <div class="classTask" @click.stop :class="{teachDivMain:BeginTeaching}">

            <!--文字排序题-->
            <WENZIPAIXU :Questions="classTaskSHITI"
                        v-if="classTaskSHITI.child.QuestionTypeCode=='QUE0138'"></WENZIPAIXU>
            <!--图片排序题-->
            <TUPIANPAIXU :Questions="classTaskSHITI"
                         v-if="classTaskSHITI.child.QuestionTypeCode=='QUE0139'"></TUPIANPAIXU>
            <!--单选题-->
            <DanXuan :Questions="classTaskSHITI" v-if="classTaskSHITI.child.QuestionTypeCode=='QUE0020'"></DanXuan>
            <!--判断题-->
            <PanDuan :Questions="classTaskSHITI" v-if="classTaskSHITI.child.QuestionTypeCode=='QUE0142'"></PanDuan>
            <!--多选题-->
            <DuoXuan :Questions="classTaskSHITI" v-if="classTaskSHITI.child.QuestionTypeCode=='QUE0037'"></DuoXuan>
            <!--主观题-->
            <ZhuGuan :Questions="classTaskSHITI" v-if="classTaskSHITI.child.QuestionTypeCode=='QUE0042'"></ZhuGuan>
            <!--归类题-->
            <GuiLei :Questions="classTaskSHITI" v-if="classTaskSHITI.child.QuestionTypeCode=='QUE0049'"></GuiLei>
            <!--图片连线题--><!--文字连线题-->
            <LianXian :Questions="classTaskSHITI"
                      v-if="classTaskSHITI.child.QuestionTypeCode=='QUE0141' || classTaskSHITI.child.QuestionTypeCode=='QUE0140'"></LianXian>
            <!--阅读理解-->
            <YueDuLiJie :Questions="classTaskSHITI"
                        v-if="classTaskSHITI.child.QuestionTypeCode=='QUE0008'"></YueDuLiJie>
            <!--听力判断题-->
            <listenPanDuan :Questions="classTaskSHITI"
                           v-if="classTaskSHITI.child.QuestionTypeCode=='QUE0143'"></listenPanDuan>
            <!--听力单项选择 -->
            <listenDuanXuan :Questions="classTaskSHITI"
                            v-if="classTaskSHITI.child.QuestionTypeCode=='QUE0147'"></listenDuanXuan>
            <!--听力图片连线题--><!--听力文字连线题-->
            <listenTEXT :Questions="classTaskSHITI"
                        v-if="classTaskSHITI.child.QuestionTypeCode=='QUE0145' || classTaskSHITI.child.QuestionTypeCode=='QUE0146' "></listenTEXT>
            <!--复合题-->
            <FUHE :Questions="classTaskSHITI" v-if="classTaskSHITI.child.QuestionTypeCode=='QUE0043'"></FUHE>


            <div class="pen" @click="openTaskList">
                <transition name="el-zoom-in-bottom">
                    <ul class="classTaskList" v-show="chooseTest">
                        <li v-for="(item,index) in QuestionDATA.child.Detail"
                            @click.stop="closeTaskList(QuestionDATA.child.Detail[index].ResourceID,index)"
                            :class="{'activeItem':chooseItem===index}">{{index+1}}
                        </li>
                    </ul>
                </transition>
            </div>
            <div class="Close" @click.stop="closeModel" v-show="!BeginTeaching">
                <i class="el-icon el-icon-close"></i>
            </div>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    import store from '../../store/'
    import {mapGetters, mapActions} from 'vuex'

    import WENZIPAIXU from '../SHITI/WENZIPAIXU/WENZIPAIXU.vue'
    import TUPIANPAIXU from '../SHITI/TUPIANPAIXU/TUPIANPAIXU.vue'
    import DanXuan from '../SHITI/DanXuan/DanXuan.vue'
    import PanDuan from '../SHITI/PanDuan/PanDuan.vue'
    import DuoXuan from '../SHITI/DuoXuan/DuoXuan.vue'
    import ZhuGuan from '../SHITI/ZhuGuan/ZhuGuan.vue'
    import GuiLei from '../SHITI/GuiLei/GuiLei.vue'
    import LianXian from '../SHITI/LianXian/LianXian.vue'
    import YueDuLiJie from '../SHITI/YueDuLiJie/YueDuLiJie.vue'
    import listenPanDuan from '../SHITI/listenPanDuan/listenPanDuan.vue'
    import listenDuanXuan from '../SHITI/listenDuanXuan/listenDuanXuan.vue'
    import listenTEXT from '../SHITI/listenTEXT/listenTEXT.vue'
    import FUHE from '../SHITI/FUHE/FUHE.vue'

    export default {
        name: "",
        props: ["QuestionDATA", "showModel"],
        data () {
            return {
                chooseTest: false,
                chooseItem: 0,
                classTaskSHITI: {
                    child: {
                        QuestionTypeCode: ''
                    }
                }
            }
        },
        computed: mapGetters([
            'divContentTop',
            'BeginTeaching'
        ]),
        mounted(){
            var _this = this;
            var load = layer.load(2, {time: 10*1000});
            this.$http.get(('api/resource/get?ids=' + _this.QuestionDATA.child.Detail[0].ResourceID + '&sk=' + store.state.mutations.getToken)).then(function (res) {
                _this.classTaskSHITI = res.data.data[0]
                console.log(_this.classTaskSHITI)
                layer.close(load);
            })
        },
        components: {
            WENZIPAIXU,
            DanXuan,
            PanDuan,
            DuoXuan,
            ZhuGuan,
            GuiLei,
            TUPIANPAIXU,
            LianXian,
            YueDuLiJie,
            listenPanDuan,
            listenDuanXuan,
            listenTEXT,
            FUHE
        },
        methods: {
            closeModel(){
                this.showModel.show = false
            },
            openTaskList(){
                if (this.chooseTest == false) {
                    this.chooseTest = true
                } else {
                    this.chooseTest = false
                }
            },
            closeTaskList(ResourceID,index){
                var load = layer.load(2, {time: 10*1000});
                var _this = this
                _this.chooseItem = index;
                this.$http.get(('api/resource/get?ids=' + ResourceID + '&sk=' + store.state.mutations.getToken)).then(function (res) {
                    _this.classTaskSHITI = res.data.data[0]
                    console.log(_this.classTaskSHITI)
                    layer.close(load);
                })
//                this.chooseTest = false
            }
        }
    }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
    @import '../../assets/css/public.scss';

    .classTest {
        position: fixed;
        background: rgba(0, 0, 0, .62);
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 9999;
        .TaskWarp {
            width: 100%;
            height: 100%;
        }
        .classTask {
            height: 90%;
            width: 90%;
            position: absolute;
            background: #fff;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            .pen {
                position: absolute;
                width: 252px;
                height: 28px;
                background: url("../../assets/images/pen.png") no-repeat;
                bottom: 20px;
                left: 20px;
                cursor: pointer;
                z-index: 4545;
                .classTaskList {
                    width: 210px;
                    position: absolute;
                    bottom: 30px;
                    left: 0;
                    right: 0;
                    margin: auto;
                    background-color: #f5f5f5;
                    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
                    display: flex;
                    flex-wrap: wrap;
                    li {
                        width: 60px;
                        height: 60px;
                        margin: 5px;
                        text-align: center;
                        line-height: 58px;
                        color: #fff;
                        background-color: #20a0ff;
                        border: 1px solid #20a0ff;
                        border-radius: 10px;
                        box-sizing: border-box;
                        cursor: pointer;
                        box-shadow: inset 0 0 40px rgba(0, 0, 0, .3);
                    }
                    li.activeItem{
                        background: #33D795;
                        border: 1px solid #33D795;
                    }
                    li:hover {
                        background-color: rgba(32, 160, 255, 0.8);
                    }
                    li.activeItem:hover{
                        background: rgba(51, 215, 149, 0.81);
                    }
                }
            }
        }
    }
</style>